<template>
  <a-row>
    <a-col>
      <form-create
        v-bind="$attrs"
        v-model="modelValue"
        v-model:api="formApi"
        :rule="rules"
        :option="options"
        class="ml-2"
      />
    </a-col>
  </a-row>
</template>

<script lang="ts" setup>
  import toLower from 'lodash-es/toLower';

  import { useDictStore } from '@/store';

  const props = defineProps({
    modelValue: {
      type: Object,
      default: () => ({}),
    },
    schema: {
      type: Array,
      default: () => [],
    },
    options: {
      type: Object,
      default: () => ({}),
    },
    autoLabelWidth: { type: Boolean, default: true },
    span: { type: Number, default: 5 },
  });

  const emits = defineEmits(['update:modelValue', 'search', 'reset']);

  const modelValue = ref(props.modelValue);
  const formApi = ref<Api>();

  const dictStore = useDictStore();

  const defaultButtons = reactive([
    {
      type: 'a-button',
      props: {
        type: 'primary',
      },
      class: 'ml-2 mb-20px',
      on: {
        click: () => {
          formApi.value?.validate((valid: boolean) => {
            if (valid) {
              emits('update:modelValue', modelValue?.value);
              emits('search', modelValue.value);
            }
          });
        },
      },
      children: [
        '查询',
        {
          type: 'icon-search',
          slot: 'icon',
          children: [{ type: 'icon-search' }],
        },
      ],
    },
    {
      type: 'a-button',
      class: 'ml-2 mb-20px',
      on: {
        click: () => {
          formApi.value?.resetFields();
          formApi.value?.reload(rules.value);
          emits('update:modelValue', {});
          emits('reset', {});
        },
      },
      children: [
        '重置',
        {
          type: 'icon-refresh',
          slot: 'icon',
          children: [{ type: 'icon-refresh' }],
        },
      ],
    },
  ]);

  const rules = computed(() => {
    if (props.schema) {
      const res = props.schema.map((item: any) => {
        return {
          col: {
            span: props.span,
          },
          wrap: {
            labelColProps: { span: 6 },
            wrapperColProps: { span: 18 },
            labelColStyle: { flex: '0 0 28px' },
          },
          ...item,
          options:
            item.enumName && toLower(item.type) === 'select'
              ? dictStore.getItems(item.enumName)
              : item.options,
          props: {
            allowClear: true,
            placeholder: toLower(item.type).includes('input')
              ? '请输入' + item.label
              : '请选择' + item.label,
            ...item.componentProps,
            ...item.props,
          },
          effect: {
            fetch: item.optionApi
              ? {
                  action: async () => {
                    return await item.optionApi();
                  },
                  to: item.optionTo || 'options',
                }
              : item.fetch,
            ...item.effect,
          },
          title: item.label ?? item.title,
          on: {
            ...item.on,
            pressCenter: () => {
              emits('search', modelValue.value);
            },
            change: () => {
              emits('search', modelValue.value);
            },
          },
        };
      });
      return res.concat(defaultButtons);
    }
    return [];
  });

  const options = computed(() => {
    return {
      form: {
        labelAlign: 'right',
        labelColProps: {
          span: 5,
        },
        wrapperColProps: {
          span: 19,
        },
        autoLabelWidth: props.autoLabelWidth,
      },
      row: { gutter: 16 },
      submitBtn: false,
      ...props.options,
    };
  });
</script>
